<template>
  <el-drawer
      :with-header="false"
      :modal="false"
      :show-close="false"
      size="100%"
      :modal-append-to-body="false"
      :destroy-on-close="true"
      :visible.sync="lineDrawer"
      direction="rtl"
      custom-class="drawer"
      v-if="lineDrawer">
    <div class="topBody">
      <div class="title">关系连线配置</div>
      <div class="formItem">
        <div
            class="formBody"
            v-for="(dom, domIndex) in domData"
            :key="domIndex">
          <el-form class="myForm ipt-in-form" :model="dom" label-width="80px">
            <el-form-item label="连线类型">
              <el-select v-model="dom.lxlx" placeholder="请选择数据线类型">
                <el-option label="数据线" value="0"></el-option>
                <el-option label="状态线" value="1"></el-option>
                <el-option label="控制线" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="输出类型">
              <el-select
                  v-model="dom.sclx"
                  @change="lxChange(domIndex)"
                  placeholder="请选择数据线类型">
                <el-option label="单值" value="0"></el-option>
                <el-option label="JSON" value="1"></el-option>
                <el-option label="结构体" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="源函数">
              <el-select v-model="dom.yhs" placeholder="请选择源函数">
                <el-option
                    v-for="(item, index) in source.pfunctionList"
                    :key="item.id + index"
                    :label="item.functionName"
                    :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="目标函数">
              <el-select
                  v-model="dom.mbhs"
                  @change="selFnc(domIndex, dom.mbhs)"
                  placeholder="请选择目标函数">
                <el-option
                    v-for="item in target.pfunctionList"
                    :key="item.id + Math.random() * 10"
                    :label="item.functionName"
                    :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <div
                v-for="(wzItem, wzIndex) in dom.wz"
                class="wz"
                :key="wzIndex + 'wz'">
              <div
                  v-for="(item, Iptindex) in wzItem.scwz"
                  :key="Iptindex + 'scwz'"
                  v-show="dom.sclx != 0"
                  class="w90">
                <el-form-item label="输出位置">
                  <el-select v-model="item.scwz" placeholder="请选择输出位置">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div
                  v-for="(item, Iptindex) in wzItem.srwz"
                  :class="Iptindex == wzItem.srwz.length - 1 ? 'w100' : 'w90'"
                  :style="Iptindex % 2 == 1 ? 'margin-left: 4px;' : ''"
                  :key="Iptindex + 'srwz'">
                <el-form-item label="输入位置">
                  <el-select v-model="item.srwz" placeholder="请选择入参位置">
                    <el-option
                        v-for="(item, index) in dom.fnc"
                        :key="JSON.stringify(item) + index"
                        :label="item.name"
                        :value="item.value"
                    ></el-option>
                  </el-select>
                  <div class="iptAddDel"
                       v-show="
                      dom.sclx == 0
                        ? Iptindex == wzItem.srwz.length - 1
                          ? true
                          : false
                        : wzIndex == dom.wz.length - 1
                        ? true
                        : false">
                    <i class="el-icon-circle-plus-outline"
                       @click="iptAdd(domIndex)"></i>
                    <i v-show="dom.sclx == 0 ? Iptindex != 0 : wzIndex != 0"
                       class="el-icon-remove-outline red"
                       @click="iptDel(domIndex, wzIndex)"></i>
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-form>
          <div class="formDelete">
            <i
                v-show="dom.show"
                @click="delForm(domIndex)"
                class="el-icon-remove-outline"></i>
          </div>
        </div>
      </div>

      <div class="addForm">
        <i class="el-icon-circle-plus-outline" @click="addForm"></i>
      </div>
    </div>
    <div class="bt">
      <el-button type="primary" @click="subInfo">保存</el-button>
    </div>
  </el-drawer>
</template>

<script>
import {get_getFunctionById} from "@/apis/appLC/applc";
import LineComp from "./LineComp.vue";

export default {
  components: {LineComp},
  props: ["lineDrawer", "source", "target", "currentLin"],
  data() {
    return {
      form: {
        xlx: "0",
        yhs: "",
        mbhs: "",
        rcwz: "",
      },
      fnc: [],
      domData: [
        {
          lxlx: "",
          sclx: "0",
          yhs: "",
          mbhs: "",
          wz: [{scwz: [{scwz: ""}], srwz: [{srwz: ""}]}],
          show: false,
          fnc: [],
        },
      ],
    };
  },
  computed: {
    sourceInfoTab() {
      return this.source.pfunctionList || [];
    },
    targeInfoTab() {
      return this.$props.target.pfunctionList || [];
    },
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      let labels = this.currentLin.cell.store.data.labels;
      console.log(labels)
      if (labels.length > 0) {
        let arr = [];
        labels.forEach((item) => {
          arr.push(item.attrs.labelText.val);
        });
        this.domData = arr;
        console.log(this.domData)
      }
    });
  },
  methods: {
    //输入框添加
    iptAdd(domIndex) {
      //如果是单值
      if (this.domData[domIndex].sclx == 0) {
        if (
          this.domData[domIndex].wz[0].srwz.length <
          this.domData[domIndex].fnc.length
        ) {
          this.domData[domIndex].wz[0].srwz.push({srwz: ""});
        } else {
          this.$message.error("超出目标函数入参个数");
        }
      } else {
        if (
          this.domData[domIndex].wz.length < this.domData[domIndex].fnc.length
        ) {
          this.domData[domIndex].wz.push({
            scwz: [{scwz: ""}],
            srwz: [{srwz: ""}],
          });
        } else {
          this.$message.error("超出目标函数入参个数");
        }
      }
    },
    iptDel(domIndex, Iptindex) {
      if (this.domData[domIndex].sclx == 0) {
        this.domData[domIndex].wz[0].srwz.splice(Iptindex, 1);
      } else {
        this.domData[domIndex].wz.splice(Iptindex, 1);
      }
    },
    //类型切换
    lxChange(domIndex) {
      this.domData[domIndex].wz = [
        {scwz: [{scwz: ""}], srwz: [{srwz: ""}]},
      ];
    },
    //添加表单
    addForm() {
      this.domData.push({
        lxlx: "",
        sclx: "0",
        yhs: "",
        mbhs: "",
        wz: [{scwz: [{scwz: ""}], srwz: [{srwz: ""}]}],
        show: true,
        fnc: [],
      });
    },
    //删除表单
    delForm(index) {
      this.domData.splice(index, 1);
    },
    selFnc(inx, val) {
      get_getFunctionById({functionId: val}).then((res) => {
        let {data} = res.data;
        this.domData[inx].fnc = data.paramInputClass.split(",").map((item, index) => {
          return {
            value: index,
            name: item.split(' ')[1] || ''
          }
        });
      });

    },
    subInfo() {
      // this.$emit("subLinInfo", this.form);
      this.$emit("subLinInfo", this.domData);
    },
  },
};
</script>
<style lang="less" scoped>
  .w90 {
    width: 45%;
  }

  .w100 {
    width: 50%;
  }

  .iptAddDel {
    width: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 16px;
    color: #409eff;

    .red {
      color: red;
    }

    i {
      cursor: pointer;
    }
  }

  /deep/ .el-form-item__content {
    display: flex;
    align-items: center;
  }

  .addForm {
    width: 24px;
    height: 24px;
    margin: 20px 0 0 -25px;
    font-size: 24px;
    color: #409eff;

    .el-icon-circle-plus-outline {
      cursor: pointer;
    }
  }

  .formDelete {
    width: 24px;
    height: 24px;
    margin-left: 5px;
    font-size: 24px;
    color: red;

    .el-icon-remove-outline {
      cursor: pointer;
    }
  }

  .topBody {
    display: flex;
    flex-wrap: wrap;

    .title {
      width: 100%;
      background: #4d5c71;
      line-height: 30px;
      height: 30px;
      color: #fff;
      padding-left: 20px;
      box-sizing: border-box;
    }
  }

  .formBody {
    width: calc(100% - 4px);
    margin: 10px auto;
    display: flex;
    align-items: flex-end;
  }

  .bt {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }

  .myForm {
    border: 1px solid #9ba4b1;
    width: 410px;
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      width: 45%;
      display: flex;
    }

    .w50 {
      width: 50% !important;

      .el-form-item {
        width: 100% !important;
      }
    }

    .w45 {
      width: 45% !important;

      .el-form-item {
        width: 100% !important;
      }
    }

    .wz {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-left: 15px;

      .el-form-item {
        width: 45%;
        display: flex;
      }
    }

    /deep/ .el-form-item__content {
      margin-left: 0 !important;

      .el-select {
        width: 110px !important;
      }
    }
  }

  .active {
    background: #a7a9ab;
  }

  .putIpt {
    display: inline-block;
    width: 80px;
    margin: 10px;
    line-height: 30px;
    border: 1px solid #000;
    text-align: center;
    cursor: pointer;
  }

  .drawer {
    .cont-deploy {
      .title {
        background: #4d5c71;
        color: white;
        height: 35px;
        line-height: 35px;
        padding-left: 20px;
      }

      .r-main {
        // padding: 15px;
        height: calc(100%);
        overflow-y: auto;
        position: relative;
        background: #fff;

        /deep/ .el-collapse-item__header {
          padding-left: 20px;
        }

        /deep/ .el-collapse-item__arrow {
          margin-left: 30px;
        }

        .r-bottom {
          // position: fixed;
          text-align: center;
          margin: 10px 0;
          // bottom: 60px;
          // right: 200px;
        }

        .el-collapse-item-content {
          padding: 0px 20px;
        }

        .r-title {
          padding: 10px;
          padding-top: 0;
        }
      }
    }

    /deep/ .el-form-item {
      // padding: 8px 0;
      // margin: 5px 0;
      border-radius: 2px;

      .el-form-item__label {
        padding-top: 8px;
        white-space: nowrap;
      }

      .cont {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .f-after {
        width: 60px;
        // background-color: #fff;
        // align-self: flex-end;
        text-align: center;

        a {
          font-size: 18px;
          // display: none;
        }
      }

      &:hover {
        .f-after {
          a {
            display: inline-flex;
          }
        }
      }
    }

    .comp {
      background-color: #f6f7fb;
      padding: 5px;
      // .comp-title {
      //   display: flex;
      //   justify-content: space-around;
      //   .t-out {
      //     width: 50%;
      //     background-color: #dbf9f9;
      //     display: flex;
      //     justify-content: center;
      //     align-items: center;
      //   }
      //   .t-in {
      //     width: 50%;
      //     background-color: #e4f2ff;
      //     display: flex;
      //     justify-content: center;
      //     align-items: center;
      //   }
      //   img {
      //     margin-right: 10px;
      //   }
      // }
      // display: flex;
    }
  }

  .el-drawer__wrapper {
    right: 0;
    left: auto;
    width: 40%;
    position: absolute;
  }

  .el-select {
    margin: 8px 0;
  }

  .el-descriptions {
    /deep/ .el-descriptions-item__cell {
      padding: 0 !important;

      .el-select {
        width: 100%;
        margin: 0;
      }
    }

    /deep/ .el-descriptions-item__label {
      width: 80px;
      text-align: center;
    }
  }

  .ipt-in-form {
    /deep/ .el-form-item .el-form-item__label {
      color: #333333 !important;
    }
  }
</style>
